<!--
    /**
     * @author RaoShuang
     * @emil 991207823@qq.com
     * @date 2020/11/23 21:13
     */
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:mouseover</title>
		<style>
			#div{
				background-color: red;
                width:300px;
                height:300px;
			}
            #div2{
                background-color: red;
                width:200px;
                height:200px;
            }
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<div @mouseover="fun1" id="div">
				<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
			</div>
            <hr/>

            <div onmouseover="divmouseover()" id="div2">
				<textarea onmouseover="textareamouseover()">这是一个文件域2</textarea>
			</div>
		</div>
	</body>
	<script>
        //传统的js方式
        function divmouseover(){
            alert("鼠标移动到了div2上了");
        }

        function textareamouseover(){
            alert("鼠标移动到了textarea 2上了")
            // 停止事件传播（不在触发div的提示）
            event.stopPropagation();
        }

		//view model
        /**
         * @事件名称  就是  v-on:事件名称的简写方式
         * @mouseover它就等同于v-on:mouseover
         */
        new Vue({
            el:"#app",
            methods:{
                fun1:function(){
                    alert("鼠标悬停在div上了");
                },
                fun2:function(event){
                    alert("鼠标悬停在textarea上了");
                    event.stopPropagation();
                }
            }
        });
	</script>

</html>